<template>
  <!--  <a-layout-sider class="deskMenu" :class="{ layoutBoxOut: menuState, layoutBoxPut: !menuState }">-->
  <a-menu v-model:collapsed="collapsed" accordion breakpoint="xl" show-collapse-button @collapse="setCollapsed" @menu-item-click="goto">
    <template v-if="mRouter != null">
      <div v-for="(v, i) in mRouter" :key="i">
        <template v-if="v.meta.mapKey == 1">
          <deskMenuItem :data="v.children[0]" />
        </template>
        <template v-else-if="v.meta.mapKey == 2">
          <deskSubMenu :data="v" />
        </template>
        <template v-else>
          <deskSubMenuThreeLevel :data="v" />
        </template>
      </div>
    </template>
  </a-menu>
</template>

<script lang="ts">
import { toRefs } from 'vue';
import importConfig from './deskMenu.ts';
import deskMenuItem from './comonents/deskMenuItem/deskMenuItem.vue';
import deskSubMenu from './comonents/deskSubMenu/deskSubMenu.vue';
import deskSubMenuThreeLevel from './comonents/deskSubMenuThreeLevel/deskSubMenuThreeLevel.vue';

export default {
  components: {
    deskMenuItem,
    deskSubMenu,
    deskSubMenuThreeLevel,
  },
  setup() {
    const { base, collapseState, collapsed, watchWidth, goto, init, setCollapsed } = importConfig();
    watchWidth();
    init();

    return {
      ...toRefs(base),
      collapseState,
      collapsed,
      goto,
      setCollapsed,
    };
  },
};
</script>

<style lang="less" scoped>
/*.deskMenu {*/
/*  !*width: 100%;*!*/
/*  height: 100%;*/
/*}*/

/*.layoutBoxOut {*/
/*  !* 调用动画 *!*/
/*  animation-name: layoutBoxOutOut;*/
/*  !* 持续时间 *!*/
/*  animation-duration: 1s;*/
/*  animation-fill-mode: forwards;*/
/*}*/

/*.layoutBoxPut {*/
/*  !* 调用动画 *!*/
/*  animation-name: layoutBoxPutPut;*/
/*  !* 持续时间 *!*/
/*  animation-duration: 1s;*/
/*  animation-fill-mode: forwards;*/
/*}*/

/*@keyframes layoutBoxOutOut {*/
/*  0% {*/
/*    width: 200px;*/
/*  }*/

/*  100% {*/
/*    width: 48px;*/
/*  }*/
/*}*/

/*@keyframes layoutBoxPutPut {*/
/*  0% {*/
/*    width: 48px;*/
/*  }*/

/*  100% {*/
/*    width: 200px;*/
/*  }*/
/*}*/

/*.arco-menu-light .arco-menu-item.arco-menu-selected {*/
/*  background: #165dff;*/
/*  color: white;*/
/*}*/
</style>
